package com.tencent.compose.sample.breakpoint

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.huawei.compose.breakpoint.*


/**
 * CMP Breakpoint 演示主页面
 * 展示断点系统的各种用例
 */
@Composable
fun BreakpointDemo(onBackClick: () -> Unit = {}) {
    var selectedTab by remember { mutableStateOf(0) }
    val tabs = listOf("响应式网格", "自适应排版", "组合断点", "断点信息", "API测试")

    Column(modifier = Modifier.fillMaxSize()) {
        // 顶部 AppBar
        TopAppBar(
            title = { Text("断点系统演示") },
            navigationIcon = {
                IconButton(onClick = onBackClick) {
                    Icon(Icons.AutoMirrored.Filled.ArrowBack, "返回")
                }
            },
            backgroundColor = MaterialTheme.colors.primary,
            contentColor = MaterialTheme.colors.onPrimary
        )

        // 顶部 Tab 栏
        TabRow(
            selectedTabIndex = selectedTab,
            backgroundColor = MaterialTheme.colors.primaryVariant
        ) {
            tabs.forEachIndexed { index, title ->
                Tab(
                    selected = selectedTab == index,
                    onClick = { selectedTab = index },
                    text = {
                        Text(
                            text = title,
                            fontSize = 14.sp,
                            fontWeight = if (selectedTab == index) FontWeight.Bold else FontWeight.Normal
                        )
                    }
                )
            }
        }

        // 内容区域
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp)
        ) {
            when (selectedTab) {
                0 -> ResponsiveGridDemo()
                1 -> AdaptiveTypographyDemo()
                2 -> CombinedBreakpointsDemo()
                3 -> BreakpointInfoDemo()
                4 -> AdvancedApiDemo()
            }
        }
    }
}


/**
 * 示例 1: 响应式网格布局
 * 根据断点自动调整列数
 */
@Composable
fun ResponsiveGridDemo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
    ) {
        Text(
            text = "响应式网格布局",
            style = MaterialTheme.typography.h5,
            fontWeight = FontWeight.Bold
        )

        Spacer(modifier = Modifier.height(8.dp))

        Text(
            text = "根据屏幕宽度自动调整列数：XS=1列, SM=2列, MD=3列, LG=4列, XL=6列",
            style = MaterialTheme.typography.body2,
            color = Color.Gray
        )

        Spacer(modifier = Modifier.height(16.dp))

        // 🎯 使用断点调整列数
        val columns = rememberBreakpointValue(
            xs = 1,
            sm = 2,
            md = 3,
            lg = 4,
            xl = 6,
            base = 2
        )

        val itemSpacing = rememberBreakpointValue(
            xs = 8.dp,
            sm = 12.dp,
            md = 16.dp,
            base = 12.dp
        )

        Text(
            text = "当前列数: $columns",
            style = MaterialTheme.typography.subtitle1,
            color = MaterialTheme.colors.primary,
            modifier = Modifier.padding(bottom = 16.dp)
        )

        LazyVerticalGrid(
            columns = GridCells.Fixed(columns),
            contentPadding = PaddingValues(itemSpacing),
            horizontalArrangement = Arrangement.spacedBy(itemSpacing),
            verticalArrangement = Arrangement.spacedBy(itemSpacing),
            modifier = Modifier
                .fillMaxWidth()
                .height(400.dp)
        ) {
            items(24) { index ->
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .aspectRatio(1f),
                    backgroundColor = MaterialTheme.colors.secondaryVariant
                ) {
                    Box(
                        contentAlignment = Alignment.Center,
                        modifier = Modifier.fillMaxSize()
                    ) {
                        Text(
                            text = "${index + 1}",
                            fontSize = 24.sp,
                            fontWeight = FontWeight.Bold,
                            color = MaterialTheme.colors.onSecondary
                        )
                    }
                }
            }
        }
    }
}

/**
 * 示例 2: 自适应排版
 * 根据断点调整字体大小和间距
 */
@Composable
fun AdaptiveTypographyDemo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(16.dp)
    ) {
        Text(
            text = "自适应排版",
            style = MaterialTheme.typography.h5,
            fontWeight = FontWeight.Bold
        )

        Spacer(modifier = Modifier.height(16.dp))

        // 🎯 使用断点调整字体大小
        val titleSize = rememberBreakpointValue(
            xs = 20.sp,
            sm = 24.sp,
            md = 28.sp,
            lg = 32.sp,
            xl = 36.sp,
            base = 24.sp
        )

        val bodySize = rememberBreakpointValue(
            xs = 12.sp,
            sm = 14.sp,
            md = 16.sp,
            lg = 18.sp,
            base = 14.sp
        )

        val padding = rememberBreakpointValue(
            xs = 8.dp,
            sm = 12.dp,
            md = 16.dp,
            lg = 20.dp,
            base = 16.dp
        )

        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 8.dp),
            backgroundColor = MaterialTheme.colors.primaryVariant
        ) {
            Column(
                modifier = Modifier.padding(padding)
            ) {
                Text(
                    text = "响应式标题",
                    fontSize = titleSize,
                    fontWeight = FontWeight.Bold,
                    color = MaterialTheme.colors.onPrimary
                )

                Spacer(modifier = Modifier.height(8.dp))

                Text(
                    text = "这段文字会根据屏幕尺寸自动调整字号和间距，在小屏幕上使用较小的字号，在大屏幕上使用较大的字号，提供最佳阅读体验。",
                    fontSize = bodySize,
                    lineHeight = bodySize * 1.5f,
                    color = MaterialTheme.colors.onPrimary.copy(alpha = 0.8f)
                )

                Spacer(modifier = Modifier.height(8.dp))

                Text(
                    text = "当前字号 - 标题: ${titleSize.value}sp, 正文: ${bodySize.value}sp",
                    fontSize = 12.sp,
                    color = MaterialTheme.colors.primary
                )
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        // 🎯 高度断点示例
        val verticalPadding = rememberHeightBreakpointValue(
            sm = 8.dp,   // 横向窗口：小间距
            md = 16.dp,  // 方形窗口：中等间距
            lg = 24.dp,  // 纵向窗口：大间距
            base = 16.dp
        )

        Card(
            modifier = Modifier.fillMaxWidth(),
            backgroundColor = MaterialTheme.colors.secondaryVariant
        ) {
            Column(
                modifier = Modifier.padding(
                    horizontal = 16.dp,
                    vertical = verticalPadding
                )
            ) {
                Text(
                    text = "高度自适应间距",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    color = MaterialTheme.colors.onSecondary
                )

                Spacer(modifier = Modifier.height(8.dp))

                Text(
                    text = "垂直间距根据窗口高宽比调整：\n" +
                            "• 横向窗口(sm): 8dp\n" +
                            "• 方形窗口(md): 16dp\n" +
                            "• 纵向窗口(lg): 24dp\n" +
                            "当前: ${verticalPadding.value}dp",
                    fontSize = 14.sp,
                    color = MaterialTheme.colors.onSecondary.copy(alpha = 0.8f)
                )
            }
        }
    }
}

/**
 * 示例 3: 组合断点
 * 同时使用横向和纵向断点
 */
@Composable
fun CombinedBreakpointsDemo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(16.dp)
    ) {
        Text(
            text = "组合断点布局",
            style = MaterialTheme.typography.h5,
            fontWeight = FontWeight.Bold
        )

        Spacer(modifier = Modifier.height(16.dp))

        // 🎯 获取当前断点状态
        val (widthBp, heightBp) = rememberBreakpointState()

        Card(
            modifier = Modifier.fillMaxWidth(),
            backgroundColor = MaterialTheme.colors.secondaryVariant
        ) {
            Column(
                modifier = Modifier.padding(16.dp)
            ) {
                Text(
                    text = "当前断点组合",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    color = MaterialTheme.colors.onSecondary
                )

                Spacer(modifier = Modifier.height(8.dp))

                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    Column {
                        Text(
                            text = "横向断点",
                            fontSize = 12.sp,
                            color = Color.Gray
                        )
                        Text(
                            text = widthBp.value.uppercase(),
                            fontSize = 20.sp,
                            fontWeight = FontWeight.Bold,
                            color = MaterialTheme.colors.primary
                        )
                    }

                    Column(horizontalAlignment = Alignment.End) {
                        Text(
                            text = "纵向断点",
                            fontSize = 12.sp,
                            color = Color.Gray
                        )
                        Text(
                            text = heightBp.value.uppercase(),
                            fontSize = 20.sp,
                            fontWeight = FontWeight.Bold,
                            color = MaterialTheme.colors.secondary
                        )
                    }
                }
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        // 🎯 根据断点组合显示不同布局
        when {
            widthBp == WidthBreakpoint.LG && heightBp == HeightBreakpoint.SM -> {
                // 平板横屏
                TabletLandscapeLayout()
            }

            widthBp == WidthBreakpoint.SM && heightBp == HeightBreakpoint.LG -> {
                // 手机竖屏
                PhonePortraitLayout()
            }

            else -> {
                // 默认布局
                DefaultLayoutDemo()
            }
        }
    }
}

@Composable
private fun TabletLandscapeLayout() {
    Card(
        modifier = Modifier.fillMaxWidth(),
        backgroundColor = MaterialTheme.colors.primaryVariant
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .padding(16.dp),
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Box(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxHeight()
                    .background(
                        MaterialTheme.colors.primary.copy(alpha = 0.3f),
                        RoundedCornerShape(8.dp)
                    ),
                contentAlignment = Alignment.Center
            ) {
                Text("主内容区", fontWeight = FontWeight.Bold)
            }

            Box(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxHeight()
                    .background(
                        MaterialTheme.colors.secondary.copy(alpha = 0.3f),
                        RoundedCornerShape(8.dp)
                    ),
                contentAlignment = Alignment.Center
            ) {
                Text("侧边栏", fontWeight = FontWeight.Bold)
            }
        }
    }
}

@Composable
private fun PhonePortraitLayout() {
    Card(
        modifier = Modifier.fillMaxWidth(),
        backgroundColor = MaterialTheme.colors.secondaryVariant
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(120.dp)
                    .background(
                        MaterialTheme.colors.secondary.copy(alpha = 0.3f),
                        RoundedCornerShape(8.dp)
                    ),
                contentAlignment = Alignment.Center
            ) {
                Text("单列布局", fontWeight = FontWeight.Bold)
            }
        }
    }
}

@Composable
private fun DefaultLayoutDemo() {
    Card(
        modifier = Modifier.fillMaxWidth(),
        backgroundColor = MaterialTheme.colors.surface
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(150.dp)
                .padding(16.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "默认布局\n适用于其他断点组合",
                textAlign = TextAlign.Center,
                fontWeight = FontWeight.Bold
            )
        }
    }
}

/**
 * 示例 4: 断点信息面板
 * 显示详细的断点信息和状态
 */
@Composable
fun BreakpointInfoDemo() {
    val (widthBp, heightBp) = rememberBreakpointState()

    var logMessages by remember { mutableStateOf(listOf<String>()) }
    var logCounter by remember { mutableStateOf(0) }

    // 🎯 订阅断点变化
    RememberBreakpointSubscription { width, height ->
        logCounter++
        logMessages = (logMessages + "[#$logCounter] 断点变化: $width x $height").takeLast(10)
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Text(
            text = "断点信息面板",
            style = MaterialTheme.typography.h5,
            fontWeight = FontWeight.Bold
        )

        // 当前断点信息
        Card(
            backgroundColor = MaterialTheme.colors.primaryVariant
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text(
                    text = "当前断点",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    color = MaterialTheme.colors.onPrimary
                )

                Spacer(modifier = Modifier.height(12.dp))

                InfoRow("横向断点", widthBp.value.uppercase(), getWidthDescription(widthBp))
                Divider(
                    modifier = Modifier.padding(vertical = 8.dp)
                )
                InfoRow("纵向断点", heightBp.value.uppercase(), getHeightDescription(heightBp))
            }
        }

        // 断点范围说明
        Card(
            backgroundColor = MaterialTheme.colors.secondaryVariant
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text(
                    text = "横向断点范围",
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Bold,
                    color = MaterialTheme.colors.onSecondary
                )

                Spacer(modifier = Modifier.height(8.dp))

                BreakpointRangeItem("XS", "(0, 320) vp")
                BreakpointRangeItem("SM", "[320, 600) vp")
                BreakpointRangeItem("MD", "[600, 840) vp")
                BreakpointRangeItem("LG", "[840, 1440) vp")
                BreakpointRangeItem("XL", "[1440, +∞) vp")
            }
        }

        Card(
            backgroundColor = MaterialTheme.colors.secondaryVariant
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text(
                    text = "纵向断点范围",
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Bold,
                    color = MaterialTheme.colors.onSecondary
                )

                Spacer(modifier = Modifier.height(8.dp))

                BreakpointRangeItem("SM", "(0, 0.8) 高宽比")
                BreakpointRangeItem("MD", "[0.8, 1.2) 高宽比")
                BreakpointRangeItem("LG", "[1.2, +∞) 高宽比")
            }
        }

        // 变化日志
        Card(
            backgroundColor = MaterialTheme.colors.surface
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text(
                    text = "断点变化日志",
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Bold
                )

                Spacer(modifier = Modifier.height(8.dp))

                if (logMessages.isEmpty()) {
                    Text(
                        text = "等待断点变化...",
                        fontSize = 12.sp,
                        color = Color.Gray
                    )
                } else {
                    logMessages.forEach { message ->
                        Text(
                            text = message,
                            fontSize = 12.sp,
                            modifier = Modifier.padding(vertical = 2.dp),
                            color = MaterialTheme.colors.primary
                        )
                    }
                }
            }
        }
    }
}

@Composable
private fun InfoRow(label: String, value: String, description: String) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Column(modifier = Modifier.weight(1f)) {
            Text(
                text = label,
                fontSize = 14.sp,
                color = Color.Gray
            )
            Text(
                text = description,
                fontSize = 12.sp,
                color = Color.Gray
            )
        }
        Text(
            text = value,
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
            color = MaterialTheme.colors.primary
        )
    }
}

@Composable
private fun BreakpointRangeItem(name: String, range: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 4.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text(
            text = name,
            fontSize = 14.sp,
            fontWeight = FontWeight.Bold
        )
        Text(
            text = range,
            fontSize = 14.sp,
            color = Color.Gray
        )
    }
}

private fun getWidthDescription(bp: WidthBreakpoint): String {
    return when (bp) {
        WidthBreakpoint.XS -> "超小屏幕"
        WidthBreakpoint.SM -> "小屏幕/手机"
        WidthBreakpoint.MD -> "中等屏幕/小平板"
        WidthBreakpoint.LG -> "大屏幕/平板"
        WidthBreakpoint.XL -> "超大屏幕/电脑"
    }
}

private fun getHeightDescription(bp: HeightBreakpoint): String {
    return when (bp) {
        HeightBreakpoint.SM -> "横向窗口"
        HeightBreakpoint.MD -> "方形窗口"
        HeightBreakpoint.LG -> "纵向窗口"
    }
}

/**
 * 示例 5: 高级API演示
 * 演示 getCurrentWidthBreakpoint、getCurrentHeightBreakpoint、
 * setBreakpoints、setHeightBreakpoints 等API
 */
@Composable
fun AdvancedApiDemo() {
    val manager = createBreakpointManager()
    var currentWidthBpString by remember { mutableStateOf(manager.getCurrentWidthBreakpoint()) }
    var currentHeightBpString by remember { mutableStateOf(manager.getCurrentHeightBreakpoint()) }
    var currentWidthDp by remember { mutableStateOf(manager.getWindowWidthDp()) }
    var currentHeightDp by remember { mutableStateOf(manager.getWindowHeightDp()) }
    var customBreakpointsApplied by remember { mutableStateOf(false) }

    // 订阅断点变化
    DisposableEffect(manager) {
        val unsubscribe = manager.subscribeToBreakpoint { width, height ->
            currentWidthBpString = width
            currentHeightBpString = height
            currentWidthDp = manager.getWindowWidthDp()
            currentHeightDp = manager.getWindowHeightDp()
        }
        onDispose {
            unsubscribe()
        }
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Text(
            text = "高级API演示",
            style = MaterialTheme.typography.h5,
            fontWeight = FontWeight.Bold
        )

        // API 1: getCurrentWidthBreakpoint() & getCurrentHeightBreakpoint()
        Card(
            backgroundColor = MaterialTheme.colors.primaryVariant
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text(
                    text = "获取当前断点字符串",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    color = MaterialTheme.colors.onPrimary
                )

                Spacer(modifier = Modifier.height(12.dp))

                Text(
                    text = "API: manager.getCurrentWidthBreakpoint()",
                    fontSize = 12.sp,
                    fontFamily = androidx.compose.ui.text.font.FontFamily.Monospace,
                    color = MaterialTheme.colors.onPrimary.copy(alpha = 0.7f)
                )

                Text(
                    text = "横向断点: $currentWidthBpString",
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Medium,
                    color = MaterialTheme.colors.primary,
                    modifier = Modifier.padding(vertical = 8.dp)
                )

                Divider(
                    modifier = Modifier.padding(vertical = 8.dp),
                    color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
                )

                Text(
                    text = "API: manager.getCurrentHeightBreakpoint()",
                    fontSize = 12.sp,
                    fontFamily = androidx.compose.ui.text.font.FontFamily.Monospace,
                    color = MaterialTheme.colors.onPrimary.copy(alpha = 0.7f)
                )

                Text(
                    text = "纵向断点: $currentHeightBpString",
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Medium,
                    color = MaterialTheme.colors.secondary,
                    modifier = Modifier.padding(vertical = 8.dp)
                )

                Divider(
                    modifier = Modifier.padding(vertical = 8.dp),
                    color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
                )

                Text(
                    text = "窗口尺寸",
                    fontSize = 14.sp,
                    fontWeight = FontWeight.Medium,
                    color = MaterialTheme.colors.onPrimary.copy(alpha = 0.7f)
                )
                Text(
                    text = "宽度: $currentWidthDp dp  |  高度: $currentHeightDp dp",
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Medium,
                    color = MaterialTheme.colors.secondary,
                    modifier = Modifier.padding(vertical = 8.dp)
                )
            }
        }

        // API 2: setBreakpoints() & setHeightBreakpoints()
        Card(
            backgroundColor = MaterialTheme.colors.secondaryVariant
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text(
                    text = "自定义断点阈值",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    color = MaterialTheme.colors.onSecondary
                )

                Spacer(modifier = Modifier.height(12.dp))

                Text(
                    text = if (!customBreakpointsApplied) {
                        "当前使用默认断点阈值"
                    } else {
                        "已应用自定义断点阈值"
                    },
                    fontSize = 14.sp,
                    color = if (!customBreakpointsApplied) {
                        Color.Gray
                    } else {
                        MaterialTheme.colors.primary
                    },
                    fontWeight = if (customBreakpointsApplied) FontWeight.Bold else FontWeight.Normal
                )

                Spacer(modifier = Modifier.height(16.dp))

                // 默认阈值说明
                if (!customBreakpointsApplied) {
                    Text(
                        text = "默认横向断点阈值：",
                        fontSize = 14.sp,
                        fontWeight = FontWeight.Medium,
                        color = MaterialTheme.colors.onSecondary
                    )
                    Text(
                        text = "• SM: 320dp\n• MD: 600dp\n• LG: 840dp\n• XL: 1440dp",
                        fontSize = 12.sp,
                        color = Color.Gray,
                        modifier = Modifier.padding(vertical = 4.dp)
                    )

                    Spacer(modifier = Modifier.height(8.dp))

                    Text(
                        text = "默认纵向断点阈值（高宽比）：",
                        fontSize = 14.sp,
                        fontWeight = FontWeight.Medium,
                        color = MaterialTheme.colors.onSecondary
                    )
                    Text(
                        text = "• MD: 0.8\n• LG: 1.2",
                        fontSize = 12.sp,
                        color = Color.Gray,
                        modifier = Modifier.padding(vertical = 4.dp)
                    )
                } else {
                    Text(
                        text = "自定义横向断点阈值：",
                        fontSize = 14.sp,
                        fontWeight = FontWeight.Medium,
                        color = MaterialTheme.colors.onSecondary
                    )
                    Text(
                        text = "• SM: 400dp (原320dp)\n• MD: 700dp (原600dp)\n• LG: 1000dp (原840dp)\n• XL: 1600dp (原1440dp)",
                        fontSize = 12.sp,
                        color = MaterialTheme.colors.primary,
                        modifier = Modifier.padding(vertical = 4.dp)
                    )

                    Spacer(modifier = Modifier.height(8.dp))

                    Text(
                        text = "自定义纵向断点阈值（高宽比）：",
                        fontSize = 14.sp,
                        fontWeight = FontWeight.Medium,
                        color = MaterialTheme.colors.onSecondary
                    )
                    Text(
                        text = "• MD: 0.9 (原0.8)\n• LG: 1.3 (原1.2)",
                        fontSize = 12.sp,
                        color = MaterialTheme.colors.secondary,
                        modifier = Modifier.padding(vertical = 4.dp)
                    )
                }

                Spacer(modifier = Modifier.height(16.dp))

                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    Button(
                        onClick = {
                            // 🎯 使用 setBreakpoints API 设置自定义横向断点
                            manager.setBreakpoints(
                                mapOf(
                                    "sm" to 400f,
                                    "md" to 700f,
                                    "lg" to 1000f,
                                    "xl" to 1600f
                                )
                            )
                            // 🎯 使用 setHeightBreakpoints API 设置自定义纵向断点
                            manager.setHeightBreakpoints(
                                mapOf(
                                    "md" to 0.9f,
                                    "lg" to 1.3f
                                )
                            )
                            customBreakpointsApplied = true
                        },
                        enabled = !customBreakpointsApplied,
                        modifier = Modifier.weight(1f)
                    ) {
                        Text("应用自定义阈值")
                    }

                    Button(
                        onClick = {
                            // 恢复默认阈值
                            manager.setBreakpoints(
                                mapOf(
                                    "sm" to 320f,
                                    "md" to 600f,
                                    "lg" to 840f,
                                    "xl" to 1440f
                                )
                            )
                            manager.setHeightBreakpoints(
                                mapOf(
                                    "md" to 0.8f,
                                    "lg" to 1.2f
                                )
                            )
                            customBreakpointsApplied = false
                        },
                        enabled = customBreakpointsApplied,
                        modifier = Modifier.weight(1f)
                    ) {
                        Text("恢复默认阈值")
                    }
                }
            }
        }

        // 说明文档
        Card(
            backgroundColor = MaterialTheme.colors.surface
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text(
                    text = "API使用说明",
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Bold
                )

                Spacer(modifier = Modifier.height(8.dp))

                Text(
                    text = "• getCurrentWidthBreakpoint(): 返回当前横向断点的字符串值（xs/sm/md/lg/xl）",
                    fontSize = 12.sp,
                    color = Color.Gray,
                    modifier = Modifier.padding(vertical = 2.dp)
                )

                Text(
                    text = "• getCurrentHeightBreakpoint(): 返回当前纵向断点的字符串值（sm/md/lg）",
                    fontSize = 12.sp,
                    color = Color.Gray,
                    modifier = Modifier.padding(vertical = 2.dp)
                )

                Text(
                    text = "• setBreakpoints(Map): 设置自定义横向断点阈值（单位：dp）",
                    fontSize = 12.sp,
                    color = Color.Gray,
                    modifier = Modifier.padding(vertical = 2.dp)
                )

                Text(
                    text = "• setHeightBreakpoints(Map): 设置自定义纵向断点阈值（高宽比）",
                    fontSize = 12.sp,
                    color = Color.Gray,
                    modifier = Modifier.padding(vertical = 2.dp)
                )

                Spacer(modifier = Modifier.height(8.dp))

                Text(
                    text = "💡 提示：修改阈值后，窗口尺寸变化时将使用新的阈值计算断点",
                    fontSize = 12.sp,
                    color = MaterialTheme.colors.primary,
                    fontWeight = FontWeight.Medium
                )
            }
        }
    }
}
